<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
      <el-row>
        <el-col :span="24">
          <el-form-item :label="$t('发布场景')" prop="scene">
            <dictSelect v-model="form.scene" :clearable="false" dictionary="scene" :placeholder="$t('发布场景')" @change="onSceneChange" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('图标')" prop="logo">
            <el-input v-model="form.logo" style="display:none;" />
            <UploadAvatar v-model="form.logo" :logo-info="form.logo" />
            <!--            <div v-else>-->
            <!--              <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['vantIcon'].reset()">-->
            <!--                <vant-icon ref="vantIcon" @selected="selected" />-->
            <!--                <el-input slot="reference" v-model="form.vantIcon" :placeholder="$t('图标')" readonly>-->
            <!--                  <span v-if="form.vantIcon" slot="prefix" :class="'icon-' + form.vantIcon" class="iconfont" style="height: 32px;width: 16px;" />-->
            <!--                  <i v-else slot="prefix" class="el-icon-search el-input__icon" />-->
            <!--                </el-input>-->
            <!--              </el-popover>-->
            <!--            </div>-->
          </el-form-item>
        </el-col>
        <!--        <el-col v-if="form.scene === 'mobile'" :span="12">-->
        <!--          <el-form-item :label="$t('颜色设置')" prop="color">-->
        <!--            <el-popover placement="bottom-start" width="460" trigger="click">-->
        <!--              <color-select ref="colorSelect" :predefine-colors="predefineColors" @selected="selectedColor" />-->
        <!--              <el-input slot="reference" v-model="form.color" :placeholder="$t('颜色设置')" readonly>-->
        <!--                <span v-if="form.color" slot="prefix" style="height: 16px;width: 16px;margin-top: 10px;display: inline-block" :style="{background: form.color.split('-').length > 1 ? `linear-gradient(to right,${form.color.split('-')[0]} 0,${form.color.split('-')[1]} 50%)` : form.color}" />-->
        <!--                <i v-else slot="prefix" class="el-icon-search el-input__icon" />-->
        <!--              </el-input>-->
        <!--            </el-popover>-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
        <el-col :span="24">
          <el-form-item :label="$t('名称')" prop="name">
            <el-input v-model="form.name" :placeholder="$t('名称')" maxlength="20" show-word-limit />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('组件地址')" prop="component">
            <el-input v-model="form.component" :placeholder="$t('组件地址')" maxlength="200" show-word-limit />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('分类')" prop="group">
            <el-select v-model="form.group" :placeholder="$t('请选择')" style="width: 100%;">
              <el-option
                v-for="dict in groupOptions"
                :key="dict.dictValue"
                :label="$t(dict.dictLabel)"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <!--保存，保存并启动流程，取消 三个按钮-->
      <SaveBtn has-permi="system:quick" />
    </div>
    <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" append-to-body>
      <img width="100%" :src="form.logo" alt="">
    </el-dialog>
  </div>
</template>

<script>
import { saveHomeQuick, getHomeQuick } from '@/api/system/home/homeQuick'
import UploadAvatar from '@/components/Avatar/uploadAvatar'
// import VantIcon from '@/components/IconSelect/vantIcon.vue'
// import colorSelect from '@/components/colorSelect/colorSelect.vue'
export default {
  components: {
    UploadAvatar
    // VantIcon,
    // colorSelect
  },
  data() {
    return {
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        logo: [
          { required: true, message: this.$t('必填信息'), trigger: ['blur', 'change'] }
        ],
        vantIcon: [
          { required: true, message: this.$t('必填信息'), trigger: ['blur', 'change'] }
        ],
        name: [
          { required: true, message: this.$t('必填信息'), trigger: ['blur'] }
        ],
        scene: [
          { required: true, message: this.$t('必填信息'), trigger: ['blur', 'change'] }
        ],
        component: [
          { required: true, message: this.$t('必填信息'), trigger: 'blur' }
        ],
        group: [
          { required: true, message: this.$t('必填信息'), trigger: ['blur', 'change'] }
        ]
      },
      // 分类字典数据
      groupOptions: [],
      dialogVisible: false,
      disabled: false,
      loading: false,
      // 预设颜色
      predefineColors: ['#A1ECFF-#7CBBFE', '#32F5CA-#3CCCE7', '#81D7ED-#197DEF', '#F1A3C0-#E17AFE', '#E479FF-#8B75FF', '#FFD6C5-#FF7B39', '#FFE28D5-#FFAC09']
    }
  },
  created() {
    this.getDicts('home_group').then((response) => {
      this.groupOptions = response.data
    })
  },
  methods: {
    // 初始化数据
    init(data) {
      this.loading = true
      if (data != null && data.id !== undefined) {
        getHomeQuick(data.id).then((response) => {
          this.form = response.data
          // if (this.form.scene === 'mobile') {
          //   this.form.vantIcon = this.form.logo
          // }
          this.loading = false
        })
      } else {
        this.reset()
        this.loading = false
      }
    },
    onSceneChange() {
      // this.form.color = undefined
      // if (this.form.scene === 'pc') {
      //   this.form.logo = undefined
      // } else {
      //   this.form.logo = this.form.vantIcon
      // }
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        logo: undefined,
        name: undefined,
        component: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
        delFlag: undefined,
        scene: 'pc',
        vantIcon: undefined,
        color: undefined
      }
      this.resetForm('form')
    },
    // 取消按钮
    cancel() {
      this.$parent.$parent.formOpen = false
      this.$parent.$parent.reset()
    },
    // 关闭form页面
    closeForm() {
      // 关闭form页面遮罩层
      this.loading = false
      // 关闭form页面
      this.$parent.$parent.formOpen = false
      // 刷新list页面
      this.$parent.$parent.getList()
    },
    // 选择图标
    selected(name) {
      this.form.vantIcon = name
    },
    selectedColor(color) {
      this.form.color = color
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          console.log(this.form, 'model')
          this.loading = true
          // this.form.logo = this.form.vantIcon
          saveHomeQuick(this.form)
            .then((response) => {
              if (response.code === 200) {
                this.msgSuccess(this.$t('保存成功'))
                this.closeForm()
              } else {
                this.msgError(response.msg)
                this.loading = false
              }
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          this.locationError(document)
        }
      })
    }
  }
}
</script>
<style scoped>
@import '~@/assets/vant/iconfont.css';

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
